<template>
  <div class="ui-console" ref="uiconsole">
    <div id="console-view">
      <p v-for="(item,index) in lineData" :key="index" v-html="item">
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lineData: Array
  },
  watch: {
    lineData(val) {
      this.$nextTick(() => {
        this.$refs.uiconsole.scrollTop = this.$refs.uiconsole.scrollHeight
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ui-console {
  user-select: text;
  font-size: 12px;
  height: 500px;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 10px;
  background: #f3f3f3;
  padding: 10px;
  p {
    padding: 5px;
  }
}
</style>